<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- import CSS -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
  </head>
  <style>
    .foo i {
      margin-right: 50px;
      cursor: pointer;
    }
  </style>
  <body>
    <div id="app">
      <button @click="handle">点击</button>
      <my-app v-if="flag"></my-app>
    </div>
  </body>
  <!-- import Vue before Element -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    let div = document.createElement("div");
    div.id = "id1";
    app.appendChild(div);
    let myApp = new Vue({
      template: `
        <div>222</div>
      `,
      destroyed() {
        console.log(1);
      },
    }).$mount("#id1");
    let vm = new Vue({
      el: "#app",
      data: {
        flag: true,
      },
      beforeCreate() {
        this.popperVM = new Vue({
          data: {
            node: "",
          },
          render(h) {
            // 这里的node应该是VNode 暂时无法实现
            return this.node;
          },
        }).$mount();
      },
      mounted() {
        this.popperVM.$nextTick(() => {
          console.log(this.popperVM.$refs);
          // 或者
          console.log(this.popperVM);
          document.body.appendChild(this.popperVM.$el);
        });
      },
      methods: {
        createPopper() {
          console.log(this.popperVM);
        },
        handle() {
          this.flag = false;
        },
      },
      components: {
        myApp,
      },
    });
  </script>
</html>
